<template>
	<div>
		<div class="contain">
			<el-row :gutter="10">
				<el-col :span="5">
					<el-input v-model="search.name" placeholder="请输入要查询的项目名"></el-input>
				</el-col>
				<el-col :span="19">
					<el-button type="primary" icon="el-icon-search" plain @click="searchData()">搜索</el-button>
					<el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">添加项目</el-button>
				</el-col>
			</el-row>
			<el-table ref="filterTable" :data="result.tableData" size=mini style="width: 100%">
				<el-table-column prop="id" label="ID" width="40">
				</el-table-column>
				<el-table-column prop="name" label="项目名称" width="120">
				</el-table-column>
				<el-table-column prop="description" label="项目描述" width="120">
				</el-table-column>
				<el-table-column prop="teamName" label="团队名称" width="100"> </el-table-column>
				<el-table-column prop="principal" label="指派人" width="80"></el-table-column>
				<el-table-column prop="number" label="项目人数" width="70"></el-table-column>
				<el-table-column prop="stage" label="项目阶段" width="85"></el-table-column>
				<el-table-column prop="creator" label="项目创建人" width="90"></el-table-column>
				<el-table-column prop="owner" label="QA负责人" width="90"></el-table-column>
				</el-table-column>
				<el-table-column prop="stime" label="计划开始时间" width="100"></el-table-column>
				<el-table-column prop="etime" label="计划结束时间" width="100"></el-table-column>
				<el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
				<el-table-column prop="status" label="项目状态" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 0" style="color: #00AAFF;">未开始 </span>
						<span v-else-if="scope.row.status == 1" style="color: red;">已关闭 </span>
						<span v-else style="color: greenyellow;">正在进行中 </span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220px">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- <div class="right">右边</div> -->
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="700px">
			<Edit v-if="show" :show.sync="show" @getData="getData()" :editid="editid"></Edit>
		</el-dialog>
	</div>
</template>
<script>
	import Edit from "./edit.vue"
	import axios from "../../utils/axiosutils.js"
	export default {
		name: 'Project',
		data() {
			return {
				search: {
					name: ''
				},
				query: {
					name: '',
					pageNo: 1,
					pageSize: 8
				},
				result: {
					tableData: [],
					pages: 0
				},
				show: false,
				editid: '',
				title: ''
			}
		},
		components: {
			Edit
		},
		created() {
			if(this.$route.query.projectName!=null){
				this.query.name=this.$route.query.projectName;
				this.query.pageNo = 1
			}
			this.getData()
		},
		
		methods: {
			getData(){
				axios.get("/project/list", resp => {
					this.result.tableData = resp.obj.records;
				}, this.query)
			},
			handleEdit(id) {
				this.editid = id;
				this.show = true;
				this.title = "修改";
			},
			add() {
				this.editid = null;
				this.show = true;
				this.title = "添加项目";
			},
			searchData() {
				this.query.name=this.search.name;
				this.query.pageNo = 1;
				this.getData()
			},
			handleDelete(id){
				axios.get("/project/deleteById", resp => {
					this.$message.success("删除成功");
					this.getData()
				}, {id:id})
			}
		}
	}
</script>
<style scoped>
	/* .left{
		display: inline-block;
	}
	 .right{
		display: inline-block;
	} */
</style>
